<template>
  <view class="card-view">
    <view class="address-head">
      <view class="head-left">联系地址</view>
      <view class="head-right"
        ><i class="el-icon-circle-plus-outline" style="margin-right: 2px"></i
        >新增</view
      >
    </view>
    <view class="address-list">
      <view v-for="(item, index) in 4" :key="index" class="address-item">
        <view class="item-view">
          <view class="item-name">宋先生 · 18640848388</view>
          <view class="item-adr"
            >辽宁省大连市高新技术产业园区三丰大厦C座2402室</view
          >
          <view class="item-button">
            <view class="edit-button">
              <image
                src="/static/pc/pcedit-icon.png"
                class="left-image"
              ></image>
              编辑
            </view>
            <view class="delete-button">
              <image
                src="/static/pc/pcdelete-icon.png"
                class="left-image"
              ></image>
              删除
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.card-view {
  width: 100%;
  background: white;
  padding: 48px 40px 36px 40px;
  min-height: 610px;
  .address-head {
    @extend .row-between;
    font-family: PingFangSC, PingFang SC;
    text-align: left;
    font-style: normal;
    .head-left {
      font-weight: 600;
      font-size: 20px;
      color: #2c1101;
      line-height: 28px;
    }
    .head-right {
      font-weight: 400;
      font-size: 14px;
      color: #ff2615;
      line-height: 20px;
    }
  }
  .address-list {
    width: 100%;
    @extend .row-between;
    flex-wrap: wrap;
    .address-item {
      width: calc(100% / 2 - 10px);
      margin-top: 20px;
      .item-view {
        width: 100%;
        // height: 126px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e8ded6;
        backdrop-filter: blur(4px);
        padding: 13px 16px;
        .item-name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #2c1101;
          line-height: 28px;
          text-align: left;
          font-style: normal;
        }
        .item-adr {
          font-weight: 400;
          font-size: 14px;
          color: #b8aca3;
        }
        .item-button {
          margin-top: 25px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #2c1101;
          line-height: 20px;
          font-style: normal;
          @extend .row-end;
          .edit-button {
            margin-right: 30px;
            .left-image {
              width: 12px;
              height: 12px;
              margin-right: 2px;
            }
          }

          .delete-button {
            color: #ff2615;
            .left-image {
              width: 12px;
              height: 12px;
              margin-right: 2px;
            }
          }
        }
      }
    }
  }
}
</style>